<template>
	<div>
		<el-row :span="24">
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="bghhhhh">
						<div class="rightCon">
							<headerPcTow :title="$t('l_tixianmima')" :isShow="true"></headerPcTow>


							<!-- <div class="pc_conbox">
						<div class="pc_conboxs"> -->
							<!-- <div class="navbar">
								<div class="left" @click="back1">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
										</svg>
									</i>
									<span>返回</span>
								</div>
								<div class="center">
									<img style="transform: rotate(180deg);" src="../../assets/images/yh/jiantou.png" alt="">
									<div class="pc_title">提现密码</div>
									<img src="../../assets/images/yh/jiantou.png" alt="">
								</div>
								<div class="left"></div>
							</div> -->
							<div class="pc_cons">
								<div class="pc_consbox">
									<div class="pc_consboxtext">{{$t('l_shezhitixianmima')}}</div>
									<div class="pc_items" v-if="userInfo && userInfo.pay_password == 1">
										<div>{{$t('l_jiutixianmima')}}</div>
									</div>
									<el-input v-if="userInfo && userInfo.pay_password == 1" v-model="value3"
										placeholder="" :show-password="true" />
									<div class="pc_items">
										<div>{{$t('l_xintixianmima')}}</div>
									</div>
									<el-input v-model="value3" placeholder="" :show-password="true" />
									<div class="pc_items">
										<div>{{$t('l_querenxintixianmima')}}</div>
									</div>
									<el-input v-model="value1" placeholder="" :show-password="true" />
									<div class="tips">{{$t('l_tixianmimazhongyao')}}</div>
									<div class="pc_btngroup">
										<div class="pc_btns" @click="setPayword">{{$t('l_queding')}}</div>
									</div>
								</div>
							</div>
							<!-- <div class="pc_copyright">
								<p>拉斯维加斯是国际最知名的线上博彩运营公司，以前端科技提供无与伦比的真人、电子、体育、彩票，还有精彩纷呈的高质感创意游戏！拉斯维加斯持有曼岛政府OGRA(Online Gaming Regulation
									Act) 合法博彩娱乐公司牌照。 诚信、专业及安全的平台，让您的生活充满健康的乐趣、刺激与成就。</p>
											
								<p>Copyright © 拉斯维加斯xx.com版权所有</p>
							</div> -->
						</div>
					</div>
				</div>
			</el-col>
			<el-col :sm="0" :xs="24">
				<div>
					<navHeader :title="$t('l_tixianmima')"></navHeader>

					<div class="con">
						<div class="Xq4eL9kY4HGkgyNzZTx4">{{$t('l_shezhitixianmima')}}</div>

						<div class="Ou1aviPriFX421w97dGA" v-if="userInfo && userInfo.pay_password == 1">
							<div>{{$t('l_jiutixianmima')}}</div>
							<span class="R1tVtJPfBJA944lSRyyP" v-if="mask3" @click="mask3 = !mask3">
								<i class="M2AXg2u2tA9h8un7RCbH"
									style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_hide--sprite"></use>
									</svg>
								</i>
							</span>
							<span class="R1tVtJPfBJA944lSRyyP" v-if="!mask3" @click="mask3 = !mask3">
								<i class="MOFLcj7nVRZHKLivuWpP"
									style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_show--sprite"></use>
									</svg>
								</i>
							</span>
						</div>
						<!-- 密码输入框 -->
						<van-password-input :value="value3" :mask="mask3" :info="$t('l_mimaliuwei')"
							:focused="showKeyboard3" @focus="showKeyboard3 = true" />
						<!-- 数字键盘 -->
						<van-number-keyboard v-model="value3" :show="showKeyboard3" @blur="showKeyboard3 = false" />
<!-- 
						<div class="Ou1aviPriFX421w97dGA" style="margin-top: .6rem;">
							<div>{{$t('l_xintixianmima')}}</div>
							<span class="R1tVtJPfBJA944lSRyyP" v-if="mask" @click="mask = !mask">
								<i class="M2AXg2u2tA9h8un7RCbH"
									style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_hide--sprite"></use>
									</svg>
								</i>
							</span>
							<span class="R1tVtJPfBJA944lSRyyP" v-if="!mask" @click="mask = !mask">
								<i class="MOFLcj7nVRZHKLivuWpP"
									style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_show--sprite"></use>
									</svg>
								</i>
							</span>
						</div> -->
						<!-- 密码输入框 -->
						<!-- <van-password-input :value="value" :mask="mask" :info="$t('l_mimaliuwei')"
							:focused="showKeyboard" @focus="showKeyboard = true" /> -->
						<!-- 数字键盘 -->
						<van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
						<div class="Ou1aviPriFX421w97dGA" style="margin-top: .6rem;">
							<div>{{$t('l_querenxintixianmima')}}</div>
							<span class="R1tVtJPfBJA944lSRyyP" v-if="mask1" @click="mask1 = !mask1">
								<i class="M2AXg2u2tA9h8un7RCbH"
									style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_hide--sprite"></use>
									</svg>
								</i>
							</span>
							<span class="R1tVtJPfBJA944lSRyyP" v-if="!mask1" @click="mask1 = !mask1">
								<i class="MOFLcj7nVRZHKLivuWpP"
									style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 26 21.514" width="1em" height="1em" fill="currentColor"
										aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#comm_icon_show--sprite"></use>
									</svg>
								</i>
							</span>
						</div>
						<!-- 密码输入框 -->
						<van-password-input :value="value1" :mask="mask1" :info="$t('l_mimaliuwei')"
							:focused="showKeyboard1" @focus="showKeyboard1 = true" />
						<!-- 数字键盘 -->
						<van-number-keyboard v-model="value1" :show="showKeyboard1" @blur="showKeyboard1 = false" />
						<div class="tips">{{$t('l_tixianmimazhongyao')}}</div>
						<div class="orkXHvtNM5R_5twq6l5I">
							<div class="back" @click="setPayword">{{$t('l_queding')}}</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				value: '',
				mask: true,
				showKeyboard: false,
				value1: '',
				mask1: true,
				showKeyboard1: false,
				value3: '',
				mask3: true,
				showKeyboard3: false,
				userInfo: null,

				navs: [{
						id: 0,
						name: this.$t('l_remen'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_game_menu_active_8',
					},

					{
						id: -2,
						name: this.$t('l_zuijin'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1: 0,
			}
		},
		created(option) {
			this.userInfo = localStorage.getItem('userInfo')
			if (this.userInfo) this.userInfo = JSON.parse(this.userInfo)

			if (this.$route.query.set == 1) {

			} else {

				if (this.userInfo.pay_password == 1) {
					this.$router.push('./withdraw')
				}
			}

		},
		methods: {
			back1() {
				this.$router.go(-1)
			},
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			changePayPass() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.changePayPass({
					old_password: this.value3.substring(0, 6),
					password: this.value.substring(0, 6),
					password_cp: this.value1.substring(0, 6),
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.reloadUserInfo(1)
						this.$message.success(this.$t('l_caozuochenggong'));
						setTimeout(() => {
							this.$router.push('./mine')
						}, 500)
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			setPayword() {
				console.log(this.value.substring(0, 6))
				console.log(this.value3.substring(0, 6))
				console.log(this.value1.substring(0, 6))
				if (this.value3.substring(0, 6) !== this.value1.substring(0, 6)) {
					return this.$message.error(this.$t('l_mimabuyizhi'));
				}
				if (this.userInfo.pay_password == 1) {
					this.changePayPass();
					return;
				}
				let password = this.value1.substring(0, 6)
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.setPayword({
					password: password
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.reloadUserInfo(1)
						setTimeout(() => {
							this.$router.push('./withdraw')
						}, 500)
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			reloadUserInfo(reload = false) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.userGetUserInfo({
					reload: reload ? 1 : 0
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.userInfo = res.data
						localStorage.setItem('userInfo', JSON.stringify(res.data))
					} else {
						this.$message.error(res.msg);
					}
				})
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.con {
		padding: 0.4rem 0.2rem 0.2rem;
		width: 100%;
	}

	.Xq4eL9kY4HGkgyNzZTx4 {
		width: 100%;
		font-size: .24rem;
		margin-bottom: 0.4rem;
		margin-top: 0;
		color: #ffffff;
		font-weight: 700;
	}

	.Ou1aviPriFX421w97dGA {
		width: 100%;
		color: #ffffff;
		font-size: .22rem;
		height: 0.32rem;
		margin-bottom: 0.15rem;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.R1tVtJPfBJA944lSRyyP {
		font-size: .36rem;
	}

	.M2AXg2u2tA9h8un7RCbH {
		color: var(--theme-color-line);
	}

	.MOFLcj7nVRZHKLivuWpP {
		color: var(--theme-primary-color);
	}

	/deep/ .van-password-input {
		margin: 0;
	}

	/deep/ .van-password-input__security li {
	    background: var(--theme-main-bg-color);
		color: #fff;
	}

	/deep/ .van-password-input__security i {
		background-color: #fff;
	}

	/deep/ .van-password-input__info {
		margin-top: 0.1rem;
		color: #ea4e3d;
		font-size: .18rem;
		height: 0.4rem;
		line-height: 1;
		margin-bottom: -0.4rem;
		text-align: left;
	}

	.tips {
		font-size: .16rem;
		letter-spacing: normal;
		line-height: 1.75;
		margin-top: 0.3rem;
		text-align: left;
		color: #ea4e3d;
		margin-bottom: 0.5rem;
	}

	.orkXHvtNM5R_5twq6l5I {
		align-items: center;
		background-color: var(--theme-main-bg-color);
		box-shadow: 0 -0.03rem 0.1rem 0 rgb(0 0 0 / 10%);
		display: flex;
		height: 1.3rem;
		justify-content: space-between;
		padding: 0 0.2rem;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
	}

	.back {
		color: #ffffff;
		font-size: .24rem;
		height: 0.7rem;
		line-height: .7rem;
		text-align: center;
		flex: 1;
		border-radius: 0.14rem;
		background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.pc_conbox * {
		box-sizing: border-box;
	}

	.pc_conbox {
		flex: 1;
		height: calc(100vh - 62px);
		overflow: hidden;
		display: flex;
		justify-content: center;
	}

	.pc_conboxs {
		width: 945px;
		padding-top: 15px;
		height: 100%;
		overflow-y: scroll;
	}

	.pc_conboxs::-webkit-scrollbar {
		display: none;
	}

	.navbar {
		width: 100%;
		height: 47px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 7px;
		padding: 0 15px;
	}

	.navbar .left {
		width: 183px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		cursor: pointer;
	}

	.navbar .left i {
		font-size: 15px;
		color: var(--theme-text-color);
	}

	.navbar .left span {
		margin-left: 6px;
		font-size: 16px;
		color: var(--theme-text-color);
	}

	.navbar .center {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.navbar .center img {
		width: 59px;
		height: 7px;
	}

	.pc_title {
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: var(--theme-text-color-darken);
		display: -webkit-box;
		font-size: 19px;
		margin: -2px 9px 0;
		overflow: hidden;
		text-align: center;
		text-overflow: ellipsis;
		vertical-align: middle;
	}

	.pc_cons {
		width: 100%;
		background-color: var(--theme-top-nav-bg);;
		border-radius: 7px;
		display: flex;
		justify-content: center;
		margin-top: 15px;
	}

	.pc_consbox {
		width: 390px;
		padding-top: 24px;
	}

	.pc_consboxtext {
		color: var(--theme-text-color-darken);
		font-weight: 700;
		margin-bottom: 23px;
		font-size: 15px;
	}

	.pc_items {
		width: 100%;
		color: #ffffff;
		font-size: 14px;
		height: 20px;
		margin-bottom: 9.5px;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.pc_items i {
		font-size: 20px;
	}

	.pc_items .icons {
		color: var(--theme-color-line);
	}

	.pc_items .icons1 {
		color: var(--theme-primary-color);
	}

	.el-input {
		flex: 1;
		margin-bottom: 23px;
	}

	/deep/ .el-input__inner {
		width: 99% !important;
		height: 45px !important;
		border: 0 !important;
		border-radius: 0 !important;
		font-size: 14px !important;
		padding: 0 !important;
		border: 1px solid var(--theme-color-line) !important;
		border-radius: 7px !important;
		padding: 0 7px !important;
	}

	/deep/ .el-input__icon {
		width: 25px !important;
		line-height: 40px !important;
		font-size: 14px !important;
	}

	.pc_consbox .tips {
		font-size: 12px;
		letter-spacing: normal;
		line-height: 22px;
		text-align: left;
		color: #ea4e3d;
		margin-bottom: 23px;
		margin-top: 0;
	}

	.pc_btngroup {
		width: 100%;
		align-items: center;
		display: flex;
		justify-content: center;
		padding-bottom: 47px;
	}

	.pc_btns {
		font-size: 15px;
		height: 43px;
		line-height: 43px;
		white-space: normal;
		width: 143px;
		text-align: center;
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
		color: var(--theme-primary-font-color);
		border-radius: 7px;
	}

	.pc_copyright {
		padding: 16px 0;

		p {
			color: var(--theme-text-color-lighten);
			font-size: 12px;
			line-height: 20px;
			padding: 0 20px;
			text-align: center;
		}
	}
</style>